﻿<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body,html{
			font-size:13px;
			font-family: arial;
			height: 100%;
		}
		.pagination{
			overflow: hidden;
			
			margin: 0px;
			height: 30px;
			line-height: 30px;
		}
		ul{
			list-style: none;
		}
		.pagination li{
			float:left;
			margin: 2px 5px;
		}
		.active a{
			color: red;	
		}
		table{
			border-collapse: collapse;
		}
		table tr:hover{
			background: #ddd;
		}
		.red{
			color: red;
		}
	</style>
</head>
<body>
	<div id="app">
		<form>
			提交日期：<input type="text" size="10" name="date1" onclick="WdatePicker()">
				 - <input type="text" size="10" name="date2" onclick="WdatePicker()">
			客户：<input type="text" size="10" v-model="search.cust">
			销售：<input type="text" size="10" v-model="search.saler">
			团队：<select v-model="organizationId" placeholder="请选择">
				<option
				  v-for="item in organizationData"
				  :key="item.id"
				  :label="item.name"
				  :value="item.id">
				</option>
				<option
				  label="无团队"
				  value="no_organization">
				</option>
				<option
				  label="不选择"
				  :value="null">
				</option>
			  </select>
			分类：<select class="form-control" v-model="goods_categories_type">
				<option value=""> 不选择 </option>
				<option v-for="item in base.types" :value="item.val"> {{ item.name }} </option>
			</select>
			<button type="button" @click="getList()">查询</button>
			<button type="button" @click="exportExcel()">导出数据</button>
		</form>
		<div class="cnt">
		<table>
			<thead>
				<tr>
					<th>#</th>
					<th>订单号</th>
					<th>销售</th>
					<th>接单日期</th>
					<th>支付方式</th>
					<th>提交时间</th>
					<th>客户</th>
					<th>电话</th>
					<th>地址</th>
					<th>商品名称</th>
					<th>颜色</th>
					<th>尺码</th>
					<th>数量</th>
					<th>工厂价</th>
					<th>报单次数</th>
					<th>售价</th>
					<th>档口</th>
					<th>物流公司</th>
					<th>物流单号</th>
					<th>备注</th>
					<th>状态</th>
				</tr>
			</thead>
			<tbody>
				
				<tr v-for="row in rows">
					<td>{{ row.id }}</td>
					<td>{{ row.order_no }}</td>
					<td>{{ row.acct_name }}</td>
					<td>{{ row.recv_day }}</td>
					<td>{{ row.pay_type }}</td>
					<td>{{ row.add_time }}</td>
					<td>{{ row.cust }}</td>
					<td>{{ row.phone }}</td>
					<td>{{ row.area_path }}</td>
					<td>{{ row.goods_info.name }}</td>
					<td>{{ row.color }}</td>
					<td>{{ row.spec }}</td>
					<td>{{ row.qty }}</td>
					<td>{{ row.purchase_price }}</td>
					<td :class="{red: row.purchase_times>1}">{{ row.purchase_times }}</td>
					<td>{{ row.price }}</td>
					<td>{{ row.stall_name }}</td>
					<td>{{ row.exp_name }}</td>
					<td>{{ row.exp_no }}</td>
					<td>{{ row.remarks }}</td>
					<td>{{ row.progress_txt }}</td>
				</tr>
			</tbody>
		</table>
		</div>
		<div>
			每页
			<select v-model="page_size" @change="getList(1)">
				<option value="10">10</option>
				<option value="20">20</option>
				<option value="50">50</option>
				<option value="100">100</option>
				<option value="200">200</option>
			</select> 条
		</div>
		<vue-pager :total_page='total_page' :cur_page='cur_page' @do-page='getList'></vue-pager>
	</div>
<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
<script src="__STATIC__/assets/vendor/vue.js" type="text/javascript"></script>
<script src="__STATIC__/assets/scripts/vue-pager.js" type="text/javascript"></script>
<script src="__STATIC__/assets/vendor/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
		
	var vm = new Vue({
		el: '#app',
		data: {
			page_size: 20,
			rows: [],
			total_page: 0,
			cur_page: 1,
			search: {
				cust:'',
				saler: ''
			},
			organizationData:[],//组织
			organizationId:null,//团队id
			goods_categories_type:'',//商品分类
			base: {
					types: [
						{val: 1,name:'衣服'},
						{val: 2,name:'下装'},
						{val: 3,name:'鞋'},
						{val: 4,name:'箱包'},
						{val: 5,name:'饰品'},
						{val: 6,name:'化妆品'},

						{val: 7,name:'皮具'},
						{val: 8,name:'男装'},
						{val: 9,name:'女装'},
						{val: 10,name:'男鞋'},
						{val: 11,name:'女鞋'},
						{val: 12,name:'珠宝'},
						{val: 13,name:'百货'},
					]
				},
		},
		created: function(){
			this.getList();
			this.getOrganization();
		},
		methods:{
			// 获取团队列表
			getOrganization(){
				let that = this;
				$.post("{%:url('organization/getlist')%}",{
				all:'all'
				},function(rsp){
					if(rsp.code == 1){
						that.organizationData = rsp.data;
					}
				},'json')
			},
			getList: function(page=1){
				var _this = this;
				var data = {};
				data['page'] = page;
				data['page_size'] = this.page_size;
				var search = this.search;
				var date1 = $("input[name='date1']").val();
				var date2 = $("input[name='date2']").val();
				if (date1 && date2) {
					search['date1'] = date1;
					search['date2'] = date2;
				}
				// 团队查询条件
				search['organization_id'] = this.organizationId;
				search['goods_categories_type'] = this.goods_categories_type;
				
				data.search = search;
				$.post("{%:url('Orders/getOiList')%}",data,function(rsp){
					 _this.rows = rsp.data.rows;
	                _this.total_page = rsp.data.total_page;
					_this.cur_page = Number(rsp.data.cur_page);
				},'json')
			},
			// 导出数据
			exportExcel: function(){
				var _this = this;
				var search = this.search;
				var date1 = $("input[name='date1']").val();
				var date2 = $("input[name='date2']").val();
				let organizationId = this.organizationId||'';
				let excelUrl = "{%:url('Orders/exportExcle')%}"+'?page='
				+_this.cur_page+'&page_size='+this.page_size+
				'&organization_id='+organizationId+'&date1='
				+date1+'&date2='+date2+'&saler='+this.search.saler+'&cust='+this.search.cust;
				window.location.href = excelUrl;
			},
			
			
		}
	});
	
</script>
</body>
</html>